<template>
	<view class="artist">
		<view class="title"><text>推荐艺术家</text> <text class="more" @click="navTo('/pages/artist/index')">更多>></text></view>
		<swiper class="swiper" @change="change" :current="current" previous-margin="60px" next-margin="60px" :indicator-dots="false" :autoplay="false" :interval="2000" :duration="500">
			<swiper-item v-for="(item, i) in list" :key="i" >
				<view class="item" :class="{active: current==i}" @click.stop="onClickSwiperItem(item)">
					<view class="bg">
						<image class="img" mode="aspectFill" :src="item.gallery ? item.gallery.cover : '/static/images/common/placeholderImg.png'"></image>
					</view>
					<view class="avatar">
						<u-avatar size="55" :src="item.cover" mode="aspectFill"></u-avatar>
					</view>
					<view class="name">{{item.nickname}}</view>
					<view class="fans">{{item.fansCount}}粉丝</view>
					<view @click.stop="onClickFollow(item)" class="follow" :class="{cancel: item.isFollow}">{{item.isFollow ? '取消关注' : '关注'}}</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
	export default {
		components: {
		},
		data() {
			return {
				current: 0,
				list: []
			}
		},
		mounted() {
			this.getHomeArtist().then(res => {
				this.list = this.list.concat(res.data)
				this.current = this.list.length < 2 ? 0 : Math.ceil(this.list.length / 3)
			})
		},
		methods: {
			...mapActions("home", ["getHomeArtist"]),
			...mapActions("follow", ["follow", "cancelFollow"]),
			change(cur){
				this.current = cur.detail.current
			},
			onClickFollow(item){
				if(item.isFollow){
					this.cancelFollow({id: item.id}).then(res => {
						item.isFollow = !item.isFollow
					})
				} else {
					this.follow({id: item.id}).then(res => {
						item.isFollow = !item.isFollow
					})
				}
			},
			onClickSwiperItem(item){
				console.log(item);
				this.navTo('/pages/home/artistDetail', {id: item.id});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.artist{
		margin-top: 40rpx;
		.title{
			padding-bottom: 30rpx;
			font-weight: bold;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			.more{
				color: #999;
			}
		}
		.swiper{
			height: 600rpx;
			.item{
				height: 500rpx;
				background-color: #484b5e;
				border-radius: 20rpx;
				text-align: center;
				margin: 0 20rpx;
				margin-top: 20rpx;
				position: relative;
				.bg{
					height: 250rpx;
					.img{
						width: 100%;
						height: 100%;
						border-top-left-radius: 10rpx;
						border-top-right-radius: 10rpx;
					}
				}
				.avatar{
					position: absolute;
					left: 50%;
					top: 190rpx;
					transform:translate(-50%, 0);
				}
				.name{
					padding: 70rpx 0 0 0;
					font-weight: bold;
				}
				.fans{
					padding-top: 20rpx;
					padding-bottom: 10rpx;
					font-size: 26rpx;
					font-weight: bold;
				}
				.follow{
					color: #bf8fef;
					border: 2rpx solid #bf8fef;
					width: 180rpx;
					margin: 0 auto;
					padding: 8rpx 0;
					border-radius: 50rpx;
					font-size: 26rpx;
					font-weight: bold;
				}
				.cancel{
					color: #999999;
					border: 2rpx solid #999999;
				}
			}
			.active{
				height: 550rpx !important;
				margin-top: 0rpx;
				.fans{
					padding-top: 40rpx !important;
					padding-bottom: 20rpx !important;
					font-size: 26rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>
